<template>
  <div class="echarts_1_container">
    <div id="echarts_1"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

const totalManHour = () => {
  var charDom = document.getElementById('echarts_1')
  var myChart = echarts.init(charDom)

  var option = {
    title: {
      text: '总工时统计',
      padding: [15, 0, 0, 20],
      textStyle: {
        color: '#2B3674'
      }
    },
    grid: {
      left: '6%',
      right: '5%',
      top: '20%',
      bottom: '5%',
      containLabel: true
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}H'
    },
    xAxis: {
      type: 'category', // category(坐标轴类型)
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisTick: {
        // 坐标轴刻度相关配置
        show: false // 是否显示坐标轴刻度
      }
    },
    yAxis: {
      type: 'value', // value(数值轴,适用于连续数据)
      axisTick: {
        // 坐标轴刻度相关配置
        show: false // 是否显示坐标轴刻度
      }
    },
    series: [
      // 中间的长方形柱状图(柱状图):bar
      {
        type: 'bar', // 柱状图
        barWidth: 20, // 柱条的宽度,不设时自适应
        barGap: '0%', // 柱子与柱子之间的距离
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(103, 200, 255,1)'
            },
            {
              offset: 1, // 100%处的颜色
              color: 'rgba(130, 132, 253,1)'
            }
          ]
        },
        itemStyle: {
          normal: {
            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: [10, 10, 5, 5]
          }
        },
        data: [30, 40, 55, 33, 45, 90, 23]
      }
    ]
  }
  myChart.setOption(option)
  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

onMounted(() => {
  totalManHour()
})
</script>
<style lang="less">
.echarts_1_container {
  #echarts_1 {
    width: 600px;
    height: 400px;
  }
}
</style>
